<!--
  Copyright © 2017 - 2018 Cask Data, Inc.

  Licensed under the Apache License, Version 2.0 (the "License"); you may not
  use this file except in compliance with the License. You may obtain a copy of
  the License at

  http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
  WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
  License for the specific language governing permissions and limitations under
  the License.
-->

<div class="form-group macro-widget-toggle"
     ng-class="{'active': MacroWidget.isMacro || MacroWidget.containsMacro }">
  <label
    class="col-xs-3 control-label"
    ng-if="(MacroWidget.editorTypeWidgets.indexOf(MacroWidget.field['widget-type']) === -1)"
    uib-tooltip="{{::MacroWidget.field.description}}"
    tooltip-placement="right"
    tooltip-append-to-body="true"
  >
    <span ng-class="{'required': MacroWidget.node._backendProperties[MacroWidget.field.name].required}">{{::MacroWidget.field.label}}</span>
  </label>

  <div ng-class="{
        'col-xs-8': (MacroWidget.editorTypeWidgets.indexOf(MacroWidget.field['widget-type']) === -1),
        'col-xs-11 code-editor': (MacroWidget.editorTypeWidgets.indexOf(MacroWidget.field['widget-type']) !== -1)
      }">

    <div
      class="form-input-attr"
      ng-if="!MacroWidget.isMacro"
    >
      <!--
      FIXME: We need to rename this widget to code-editor and have a mode.
      -->
      <fieldset
        ng-disabled="MacroWidget.otherAceEditorWidgets.indexOf(MacroWidget.field['widget-type']) === -1 && MacroWidget.disabled"
        ng-if="(MacroWidget.editorTypeWidgets.indexOf(MacroWidget.field['widget-type']) === -1)"
        ng-class="{
          'highlight-error': !MacroWidget.node.warning &&
              MacroWidget.node._backendProperties[MacroWidget.field.name].required &&
              !MacroWidget.node.plugin.properties[MacroWidget.field.name]
        }"
      >
        <div data-name="MacroWidget.field"
             class="my-widget-container"
             ng-class="{'select-wrapper': MacroWidget.field.widget === 'select'}"
             data-model="MacroWidget.node.plugin.properties[MacroWidget.field.name]"
             data-myconfig="MacroWidget.field"
             disabled="MacroWidget.disabled"
             data-properties="MacroWidget.node.plugin.properties"
             widget-disabled="MacroWidget.node.pluginTemplate && MacroWidget.node.lock[MacroWidget.field.name]"
             input-schema="MacroWidget.node.inputSchema"
             stage-name="MacroWidget.node.plugin.label"
             is-field-required="MacroWidget.node._backendProperties[MacroWidget.field.name].required"
             node="MacroWidget.node"
             widget-container>
        </div>
      </fieldset>

      <!--
        We have a separate div for javascript editor and the reason for it as follows,

        ace-editor requires 'onFocus' event to enable copy paste functionality as part of the directive. When we wrap everything in <fieldset>
        and disable it in published mode the 'onFocus' event doesn't gets propagated to its children ergo ace-editor not knowing about 'onFocus' event. 
        This prevents the user from copying the snippet (CMD + C) from the editor in published mode. 
        Source JIRA: https://issues.cask.co/browse/CDAP-6074
      -->
      <div ng-if="(MacroWidget.editorTypeWidgets.indexOf(MacroWidget.field['widget-type']) !== -1)">
        <div data-name="MacroWidget.field"
             class="my-widget-container"
             ng-class="{'select-wrapper': MacroWidget.field.widget === 'select'}"
             data-model="MacroWidget.node.plugin.properties[MacroWidget.field.name]"
             data-myconfig="MacroWidget.field"
             disabled="MacroWidget.disabled"
             data-properties="MacroWidget.node.plugin.properties"
             widget-disabled="MacroWidget.node.pluginTemplate && MacroWidget.node.lock[MacroWidget.field.name]"
             widget-container>
        </div>
      </div>
    </div>


    <!-- Macro Input -->
    <div class="form-input-attr"
         ng-if="MacroWidget.isMacro">

      <fieldset
        ng-disabled="MacroWidget.disabled"
        ng-class="{
          'highlight-error': !MacroWidget.node.warning &&
              MacroWidget.node._backendProperties[MacroWidget.field.name].required &&
              !MacroWidget.node.plugin.properties[MacroWidget.field.name]
        }"
      >
        <!-- If its macro enabled show a textbox -->
        <text-box
          id="macro-input-{{MacroWidget.field.name}}"
          value="MacroWidget.node.plugin.properties[MacroWidget.field.name]"
          on-change="MacroWidget.onChange"
        ></text-box>
      </fieldset>
    </div>
  </div>

  <div class="col-xs-1 info-attr">

    <!-- MACRO INDICATOR-->
    <span class="macro-indicator fa-stack fa-sm"
          ng-class="{'active': MacroWidget.isMacro, 'disabled': MacroWidget.disabled}"
          ng-if="MacroWidget.node._backendProperties[MacroWidget.field.name].macroSupported"
          uib-tooltip="A placeholder that will be substituted at runtime. eg. ${placeholder} or ${secure(key)}"
          tooltip-append-to-body="true"
          tooltip-popup-delay="300"
          tooltip-placement="left"
          tooltip-delay="300"
          ng-click="MacroWidget.toggleMacro()">
      <span class="fa fa-stack-2x"
            ng-class="{'fa-circle-thin': !MacroWidget.isMacro, 'fa-circle': MacroWidget.isMacro }"></span>
      <span class="fa icon-M fa-stack-1x" ></span>
    </span>

    <span
      class="text-danger fa fa-exclamation-triangle"
      uib-tooltip="{{MacroWidget.field.errorTooltip}}"
      tooltip-append-to-body="true"
      tooltip-placement="right"
      tooltip-class="error-tooltip error-node-config"
      ng-if="!MacroWidget.node.warning && MacroWidget.node._backendProperties[MacroWidget.field.name].required && !MacroWidget.node.plugin.properties[MacroWidget.field.name]"
    >
    </span>
  </div>
</div>
